<template>
    <div class="con">
         <!-- 头部部分 -->
            <van-nav-bar class="header">
                <i slot="left" class="iconfont iconzuojiantou" @click="$router.go(-1)"></i>
                <p slot="title" class="title">个人中心</p>
                <i slot="right" class="iconfont iconshezhi"></i>
            </van-nav-bar>
            <!-- 内容区域 -->
            <div class="main">
                <div class="user">
                    <div class="top">
                        <div class="left">
                            <div class="left-txt">
                                <h3>WW频道</h3>
                                <p>你可以做任何你想做的事</p>
                            </div>
                            <div class="left-img" @click="$router.push('/user-info')">
                                <van-image                             
                                    :src="require('@/assets/403802bf52671af9fe374bef30c36189565d9ff222690-j90azd_fw658.png')"                                              
                                    fit="cover"                                                                           
                                />
                                <p>Charlotter</p>
                            </div>
                        </div>  
                        <div class="right">
                            <van-image                             
                                    :src="require('@/assets/Rose_4.png')"                                              
                                    fit="cover"                                                                           
                                />
                        </div>
                    </div>
                    <div class="fans">
                            <div class="box" @click="$router.push('/faxian')">
                                <h3>368</h3>
                                <p>关注</p>
                            </div>
                            <div class="box" @click="$router.push('/laiotian')">
                                <h3>78856</h3>
                                <p>粉丝</p>
                            </div>
                            <div class="box">
                                <h3>182</h3>
                                <p>收藏</p>
                            </div>
                    </div>
                </div>
                <!-- 这是你港新区的区域 -->
                <div class="interest">
                    <h3 class="interest-title">你可能感兴趣的</h3>
                    <van-grid :column-num="4">
                        
                        <van-grid-item>
                            <van-image                             
                                        :src="require('@/assets/1.png')"                                              
                                        fit="cover" 
                                        class="image"                                                                          
                            />
                            <div class="xihuang">
                                <h3>Eartha</h3>                            
                            </div>
                            <div class="icons">
                                <span class="iconfont iconLikeIcon1"></span>
                            </div>
                        </van-grid-item>  
                        <van-grid-item>
                            <van-image                             
                                        :src="require('@/assets/3.png')"                                              
                                        fit="cover" 
                                        class="image"                                                                          
                            />
                            <div class="xihuang">
                                <h3>Abagael</h3>
                                
                            </div>
                            <div class="icons">
                                <span class="iconfont iconLikeIcon1"></span>
                            </div>
                        </van-grid-item>    
                        <van-grid-item>
                            <van-image                             
                                        :src="require('@/assets/4.png')"                                              
                                        fit="cover" 
                                        class="image"                                                                          
                            />
                            <div class="xihuang">
                                <h3>Kaitlyn</h3>                        
                            </div>
                            <div class="icons">
                                <span class="iconfont iconLikeIcon1"></span>
                            </div>
                        </van-grid-item>    
                        <van-grid-item>
                            <van-image                             
                                        :src="require('@/assets/7.png')"                                              
                                        fit="cover" 
                                        class="image"                                                                          
                            />
                            <div class="xihuang">
                                <h3>Madeline</h3>                           
                            </div>
                            <div class="icons">
                                <span class="iconfont iconLikeIcon1"></span>
                            </div>

                        </van-grid-item>                
                    </van-grid>
                </div> 
                <!-- 我的记录 -->
                <div class="record">
                    <h3 class="rec-title">我的记录</h3>
                    <div class="text">
                        <p>所有</p>
                        <p>情感的</p>
                        <p>兴趣的</p>
                    </div>
                    <div class="images">
                        <div class="ul-image">
                            <div class="logo">
                                <van-image                             
                                    :src="require('@/assets/500540159_banner.png')"                                              
                                    fit="cover" 
                                    class="image"                                                                          
                                />
                            </div>
                            <div class="pinlun">
                                <van-image                             
                                    :src="require('@/assets/403802bf52671af9fe374bef30c36189565d9ff222690-j90azd_fw658.png')"                                              
                                    fit="cover"                                                                           
                                />
                                <h3>Charlotter</h3>
                                <i class="iconfont iconLikeIcon1"></i>
                                <p>416</p>
                            </div>
                        </div>
                        <div class="ul-image">
                            <div class="logo">
                                <van-image                             
                                    :src="require('@/assets/500404774_banner.png')"                                              
                                    fit="cover" 
                                    class="image"                                                                          
                                />
                            </div>
                             <div class="pinlun">
                                <van-image                             
                                    :src="require('@/assets/403802bf52671af9fe374bef30c36189565d9ff222690-j90azd_fw658.png')"                                              
                                    fit="cover"                                                                           
                                />
                                <h3>Charlotter</h3>
                                <i class="iconfont iconLikeIcon1"></i>
                                <p>416</p>
                            </div>
                        </div>
                        <div class="ul-image">
                            <div class="logo">
                                <van-image                             
                            :src="require('@/assets/500531879_banner.png')"                                              
                            fit="cover" 
                            class="image"                                                                          
                        />
                            </div>
                             <div class="pinlun">
                                <van-image                             
                                    :src="require('@/assets/403802bf52671af9fe374bef30c36189565d9ff222690-j90azd_fw658.png')"                                              
                                    fit="cover"                                                                           
                                />
                                <h3>Charlotter</h3>
                                <i class="iconfont iconLikeIcon1"></i>
                                <p>416</p>
                            </div>
                        </div>
                        <div class="ul-image">
                            <div class="logo">
                                <van-image                             
                            :src="require('@/assets/403802bf52671af9fe374bef30c36189565d9ff222690-j90azd_fw658.png')"                                              
                            fit="cover" 
                            class="image"                                                                          
                        />
                            </div>
                            <div class="pinlun">
                                <van-image                             
                                    :src="require('@/assets/403802bf52671af9fe374bef30c36189565d9ff222690-j90azd_fw658.png')"                                              
                                    fit="cover"                                                                           
                                />
                                <h3>Charlotter</h3>
                                <i class="iconfont iconLikeIcon1"></i>
                                <p>416</p>
                            </div>
                        </div>                  
                    </div>
                </div>
            </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
    }
  }
}
</script>
<style lang="less">
.con{
 // 头部部分
  // 头部下划线
    .van-hairline--bottom::after{
        border: none;
    }
    .header{        
        .iconzuojiantou{
                font-size: 40px;
                color: #535353;
                padding-left: 20px;
        }
        .title{
            font-size: 32px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #484747;
        }
        .iconshezhi{
            font-size: 40px;
            color: #535353;
            padding-right: 20px;
        }
    }
    // 内容部分
    .main{
        text-align: left;
        .user{
            padding: 25px 0px 0px 64px;
            .top{
                margin-bottom:18px;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                .left{
                    .left-txt{
                        margin-bottom: 39px;
                        h3{
                            font-size: 32px;
                            font-weight: normal;
                            font-stretch: normal;
                            letter-spacing: 0px;
                            color: #272636;
                            margin-bottom: 5px;
                        }
                        p{
                            font-size: 20px;
                            font-weight: normal;
                            font-stretch: normal;
                            letter-spacing: 0px;
                            color: #9b9b9b;
                        }
                    }
                    .left-img{
                        width: 126px;
                        height: 126px;
                        border-radius: 50%;
                        img{
                            width: 126px;
                            height: 126px;
                            border-radius: 50%;
                        }
                        p{
                            font-size: 24px;
                            line-height: 24px;
                            font-weight: normal;
                            font-stretch: normal;
                            letter-spacing: 0px;
                            color: #9b9b9b;
                            text-align: center;
                        }
                    }
                }
                .right{
                    margin-top: -14px;
                    img{
                        width: 218px;
                        height: 292px;
                    }
                   
                }
            }
            // 下面部分
            .fans{
                display: flex;
                flex-direction: row;
                .box{
                    margin-right: 108px;
                    h3{
                        font-size: 24px;
                        font-weight: normal;
                        font-stretch: normal;
                        letter-spacing: 0px;
                        color: #272636;
                    }
                    p{
                        font-size: 24px;
                        font-weight: normal;
                        font-stretch: normal;
                        letter-spacing: 0px;
                        color: #9b9b9b;
                    }
                }
            }
        }
        // 港新区的步伐
        
        .interest{
            padding: 0px 66px 65px;
            [class*=van-hairline]::after{
                border: none;
            }
            .van-grid-item__content--center{
                padding: 27px 28px 10px 28px;
                background-color: #fafafa;
                margin-right: 10px;
                border-radius: 10px;
            }
            .van-grid-item:nth-of-type(4){
                .van-grid-item__content--center{        
                                margin-right: 0px;
                            }
            }        
            .interest-title{
                font-size: 20px;
                line-height: 20px;
                margin: 72px 0px 45px;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 0px;
                color: #5a5a5b;
            }
            .image{
               width: 86px;
               height: 86px;
               margin-bottom: 11px;
               img{
                   border-radius: 50%;
               }
            }
            .xihuang{
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                h3{
                    font-size: 16px;
                    font-weight: normal;
                    font-stretch: normal;
                    letter-spacing: 0px;
                    color: #7e7e7e;
                }              
            }
            .icons{
                span{
                    font-size: 20px;
                    color: #d8d8d8;
                    margin-right: 4px;
                    position: absolute;
                    right: 14px;
                    bottom: 6px;
                }
            }
        }
        .record{
            padding: 0px 0px 0px 64px;
            .rec-title{
                font-size: 32px;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 0px;
                color: #5a5a5b;              
            }
            .text{
                display: flex;
                flex-direction: row;
                margin-bottom: 31px;
                margin-top: 34px;
                p{
                    margin-right: 68px;
                    font-size: 24px;
                    font-weight: normal;
                    font-stretch: normal;
                    letter-spacing: 0px;
                    color:  #9b9b9b;
                }
                p:nth-of-type(1){
                    color:  #676767;
                }
            }
            .images{
                display: flex;
                flex-direction: row;
                white-space: nowrap;
                overflow-x: auto;
                .ul-image{
                    margin-right: 30px;
                    .logo{
                        margin-bottom: 16px;
                        .image {
                            width: 236px;
                            height: 236px;
                            display: block;
                            img{
                                border-radius: 10px;
                            }
                           
                        }
                    }
                    .pinlun{
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        img{
                            width: 40px;
                            height: 40px;
                            border-radius: 50%;
                            margin-left: 6px;
                        }
                        h3{
                            font-size: 16px;
                            font-weight: normal;
                            font-stretch: normal;
                            letter-spacing: 0px;
                            color: #9b9b9b;
                            margin: 0px 47px 0px 10px;
                        }
                        i{
                                font-size: 20px;
                                color:  #d8d8d8;
                                margin-right: 4px;
                        }
                        p{
                            font-size: 16px;
                            font-weight: normal;
                            font-stretch: normal;
                            letter-spacing: 0px;
                            color: #9b9b9b;
                        }
                    }
                }
               
            }
        }
    }
}
</style>
